<!--
 * 按钮
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <button
        class="pure-button"
        :class="classes"
        :style="styles"
        :hover-class="hoverClass"
        :form-type="formType"
        :open-type="_openType"
        :scope="scope"
        :hover-start-time="hoverStartTime"
        :hover-stay-time="hoverStayTime"
        :app-parameter="appParameter"
        :hover-stop-propagation="hoverStopPropagation"
        :lang="lang"
        :session-from="sessionFrom"
        :send-message-title="sendMessageTitle"
        :send-message-path="sendMessagePath"
        :send-message-img="sendMessageImg"
        :show-message-card="showMessageCard"
        :group-id="groupId"
        :guild-id="guildId"
        :public-id="publicId"
        :data-im-id="dataImId"
        :data-im-type="dataImType"
        :data-goods-id="dataGoodsId"
        :data-order-id="dataOrderId"
        :data-biz-line="dataBizLine"
        @getphonenumber="handleGetPhoneNumber"
        @getPhoneNumber="handleGetPhoneNumber"
        @getuserinfo="handleGetUserInfo"
        @getUserInfo="handleGetUserInfo"
        @error="handleError"
        @opensetting="handleOpenSetting"
        @launchapp="handleLaunchApp"
        @contact="handleContact"
        @chooseavatar="handleChooseAvatar"
        @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        @addgroupapp="handleAddGroupApp"
        @chooseaddress="handleChooseAddress"
        @chooseinvoicetitle="handleChooseInvoiceTitle"
        @subscribe="handleSubscribe"
        @login="handleLogin"
        @im="handleIM"
        @tap="handleClick"
    >
        <!-- 按钮内容 -->
        <view class="pure-button-content" v-if="!loading">
            <!-- Icon -->
            <!-- 兼容京东多slot写法 -->
            <slot name="icon" v-if="$slots.icon"></slot>
            <view class="pure-button-icon" v-if="icon && !$slots.icon">
                <pure-icon :name="icon" :mode="iconMode"></pure-icon>
            </view>

            <!-- Text -->
            <!-- 兼容京东多slot写法 -->
            <slot v-if="$slots.default"></slot>
            <view class="pure-button-text" v-if="(text || subtext) && !$slots.default">
                <text class="pure-button-text-main" v-if="text">{{ text }}</text>
                <text class="pure-button-text-sub" v-if="subtext">{{ subtext }}</text>
            </view>

            <!-- Right -->
            <slot name="right"></slot>
        </view>

        <!-- 按钮 loading -->
        <view class="pure-button-loading" v-else>
            <!-- 兼容京东多slot写法 -->
            <slot name="loading" v-if="$slots.loading"></slot>
            <view class="pure-button-loading-icon" v-if="loadingIcon && !$slots.loading">
                <pure-icon :name="loadingIcon"></pure-icon>
            </view>
            <text class="pure-button-loading-text" v-if="loadingText && !$slots.loading">{{ loadingText }}</text>
        </view>
    </button>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: [
            "getphonenumber",
            "getuserinfo",
            "error",
            "opensetting",
            "launchapp",
            "contact",
            "chooseavatar",
            "agreeprivacyauthorization",
            "addgroupapp",
            "chooseaddress",
            "chooseinvoicetitle",
            "subscribe",
            "login",
            "im",
            "onClick",
        ],
        data() {
            return {
                timer: null, // 防抖定时器
                scope: "",
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 禁用
                if (this.disabled) classes.push(this.disabledClass);

                // 有副文本
                if (this.subtext) classes.push(`pure-button-with-subtext`);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 支付宝小程序 getPhoneNumber 得将 open-type 设置成 getAuthorize，并且将 scope 设置成 phoneNumber
            // 直接使用 button 组件可以直接将 open-type 设置成 getPhoneNumber，但是封装到组件中就不生效了，不知道为什么
            // https://opendocs.alipay.com/mini/component/button?pathHash=e0342ed0
            _openType() {
                // #ifdef MP-ALIPAY
                if (this.openType === "getPhoneNumber") {
                    this.scope = "phoneNumber";
                    return "getAuthorize";
                }
                if (this.openType === "getUserInfo") {
                    this.scope = "userInfo";
                    return "getAuthorize";
                }
                // #endif

                return this.openType;
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用了
                if (this.disabled) return;

                // 开启了防抖
                if (this.debounce) {
                    // 定时器已存在，说明还在防抖时间内
                    if (this.timer) {
                        // 判断是否需要提示
                        // 需要提示
                        if (this.debounceTip) {
                            uni.showToast({
                                title: this.debounceTip,
                                icon: "none",
                                mask: true,
                            });
                        }
                    }

                    // 定时器不存在，说明防抖时间已过
                    else {
                        // 触发点击事件
                        this.$emit("onClick");

                        // 设置防抖定时器
                        this.timer = setTimeout(() => {
                            clearTimeout(this.timer);
                            this.timer = null;
                        }, this.debounceTime);
                    }
                }

                // 未开启防抖
                else {
                    // 触发点击事件
                    this.$emit("onClick");
                }
            },

            // getPhoneNumber
            handleGetPhoneNumber(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("getphonenumber", e);
            },

            // getUserInfo
            handleGetUserInfo(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("getuserinfo", e);
            },

            // error
            handleError(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("error", e);
            },

            // openSetting
            handleOpenSetting(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("opensetting", e);
            },

            // launchApp
            handleLaunchApp(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("launchapp", e);
            },

            // contact
            handleContact(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("contact", e);
            },

            // chooseAvatar
            handleChooseAvatar(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("chooseavatar", e);
            },

            // agreePrivacyAuthorization
            handleAgreePrivacyAuthorization(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("agreeprivacyauthorization", e);
            },

            // addGroupApp
            handleAddGroupApp(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("addgroupapp", e);
            },

            // chooseAddress
            handleChooseAddress(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("chooseaddress", e);
            },

            // chooseInvoiceTitle
            handleChooseInvoiceTitle(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("chooseinvoicetitle", e);
            },

            // subscribe
            handleSubscribe(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("subscribe", e);
            },

            // login
            handleLogin(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("login", e);
            },

            // im
            handleIM(e) {
                // 禁用了
                if (this.disabled) return;

                this.$emit("im", e);
            },
        },
    };
</script>

<style lang="scss" scoped>
    @import "./style.css";
</style>
